import React, { useEffect, useRef, useState } from "react";
import { Button } from "antd-mobile";
import { isValidArr } from "@/utils";
import { NotiComp } from "@/components/common";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";

const pageName = "game.v.ready";
const klassName = pageName.replace(/\./g, '-');

export default function VReadyComp({children, content, id, actions, handler}) {
  const [loading, setLoading] = useState(false);

  const compHandler = {
    start: async () => {
    //   setLoading(true);
    //   const resp = await requewt(`${API.task.check}?id=${id}`);
    //   await setLoading(false);
    //   if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
    //     callFeedback({
    //       title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
    //       </div>
    //     })
    //     return
    //   }

      handler.start();
    }
  }

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        <div className="cp-header">
          <img src="https://yinli-qixi-run.varwey.com/2023/230318-changan-kv-game/img/v-title.png" alt="" />
        </div>

        <div className="content test">
          <NotiComp
            header={
              <div className="inner">
                <div className="tag">装备</div>
                <div className="title">疾速之靴</div>
                <div className="thumb" style={{backgroundImage: `url(https://yinli-qixi-run.varwey.com/2023/230318-changan-kv-game/source/icon-boot.png)`}} />
              </div>
            }
            content={<>6.5s零百爆发力 瞬间前进100里程</>}
            actions={false}
          />

          <NotiComp
            header={
              <div className="inner">
                <div className="tag">装备</div>
                <div className="title">超长续航包</div>
                <div className="thumb" style={{backgroundImage: `url(https://yinli-qixi-run.varwey.com/2023/230318-changan-kv-game/source/icon-battery.png)`}} />
              </div>
            }
            inline
            content={<>1100km超长续航 </>}
            actions={false}
          />
        </div>

        <div className="footer">
          <Button className={`act-btn act-btn-diamond`} onClick={e => handler.visible(`rule`)}>查看规则</Button>
          <Button className={`act-btn act-btn-diamond`}
                  loading={loading}
                  onClick={compHandler.start}>开始游戏</Button>
        </div>
      </div>
    </div>
  )
}

